<template>
  <div>
    <storeDiyForm :title="diyItem.name" :hide-tab="true">
      <template #desc>
        <p class="text-grey fz12">建议上传图片大小：362px * 502px</p>
      </template>
      <storeDiyFormItem label="弹窗状态">
        <storeDiyFormSelectBtn
          v-model="diyItem.status"
          :data="statusData"
        ></storeDiyFormSelectBtn>
      </storeDiyFormItem>
      <template v-if="diyItem.status == 1">
        <storeDiyFormItem>
          <storeDiyFormImageBtn
            text="点击设置图片"
            size="large"
            v-model="diyItem.img"
          >
          </storeDiyFormImageBtn>
        </storeDiyFormItem>
        <storeDiyFormItem label="跳转链接">
          <storeDiyFormLinkBtn text="选择跳转到的页面" v-model="diyItem.link">
          </storeDiyFormLinkBtn>
        </storeDiyFormItem>
        <storeDiyFormItem label="弹出形式">
          <storeDiyFormSelectBtn
            v-model="diyItem.layout"
            :data="layoutData"
          ></storeDiyFormSelectBtn>
        </storeDiyFormItem>
      </template>
    </storeDiyForm>
  </div>
</template>
<script lang="ts">
export default {
  name: "storeDiyEditorPopAdv",
};
</script>
<script  lang="ts" setup >
import { ref } from "vue";
import storeDiyForm from "../form/index.vue";
import storeDiyFormItem from "../form/item.vue";
import storeDiyFormSelectBtn from "../form/select-btn.vue";
import storeDiyFormImageBtn from "../form/image-btn.vue";
import storeDiyFormLinkBtn from "../form/link-btn.vue";
import { diyPopAdvDataType, diySelectDataType } from "@/types";

const props = withDefaults(
  defineProps<{
    diyItem?: diyPopAdvDataType;
  }>(),
  {
    diyItem: () => {
      return {
        img: "",
        layout: 1,
      };
    },
  }
);

const statusData = ref<Array<diySelectDataType>>([
  {
    title: "关闭",
    value: 0,
  },
  {
    title: "开启",
    value: 1,
  },
]);

const layoutData = ref<Array<diySelectDataType>>([
  {
    title: "首次弹出",
    value: 1,
  },
  {
    title: "每次弹出",
    value: 2,
  },
]);
</script>